<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .input{position: relative;height:20px;}
        .input span{position: absolute;left:0;top:0;z-index: -1;font-size: 12px;height:20px;line-height:24px;color: #666;text-indent: 2px;}
        .input input{background: transparent;height:20px;border: solid 1px #aaa;}
    </style>
</head>
<body>
    <input type="text" placeholder="这是默认的placeholder">

    <div class="input">
        <input type="text">
        <span class="msg">这是自定义的placeholder</span>
    </div>

</body>
<script>

    var txt = document.querySelector(".input input");
    var msg = document.querySelector(".input .msg");

    // 一定要先观察，原input的placeholder的功能是什么

    // 输入事件
    txt.oninput = function(){
        // 判断输入框是否为空
        if(txt.value === ""){
            // 为空，显示提示
            msg.style.display = "block";
        }else{
            // 不为空，隐藏提示
            msg.style.display = "none";
        }
    }

    
</script>
</html>